<template>
  <div class="userMain">
    <Navtop></Navtop>
    <div class="main">
      <!-- 个人中心头部 -->
      <nav>
        <div class="nav_logo">
          <p>
            <router-link to="/">KERN</router-link>
          </p>
        </div>
        <div class="title">
          <h1>{{ navTitle }}</h1>
        </div>
      </nav>
      <div class="body">
        <!-- 侧边栏 -->
        <div class="sidebar">
          <ul ref="active">
            <h2>全部功能</h2>
            <li>
              <router-link to="/personal/info">个人信息</router-link>
            </li>
            <li>
              <router-link to="/personal/shopCar">我的购物车</router-link>
            </li>
            <li>
              <router-link to="/personal/realOrder"> 我的订单</router-link>
            </li>
            <li>
              <router-link to="/personal/shoppingAddress">地址管理</router-link>
            </li>
            <li><router-link to="/personal/bhistory">我的足迹</router-link></li>
            <!-- <li>我的足迹</li>
            <li>我的足迹</li>
            <li>我的足迹</li> -->
          </ul>
        </div>
        <div class="center">
          <router-view></router-view>
        </div>
        <!-- 日历 -->
        <div class="date">
          <div class="calendar">
            <div class="nav">我的日历</div>
            <div class="mian">
              <div class="day">
                {{ day }}
              </div>
              <div class="week">{{ week }}</div>
              <div class="year">{{ year }}</div>
            </div>
          </div>
          <!-- 活动图片 -->
          <!-- <div class="activity"> -->
            <img
              src="https://image.16pic.com/00/86/29/16pic_8629209_s.jpg?imageView2/0/format/png"
              alt=""
            />
          <!-- </div> -->
        </div>
      </div>
    </div>
    <BottomList></BottomList>
    <!-- 遮罩层 -->

    <!-- <oldUser /> -->
  </div>
</template>

<script>
import Navtop from "../../components/navtop";
import BottomList from "../../components/bottomList.vue";
import Navtwo from "../../components/navTwo";
import { Shopimg, getBanner } from "../../api/test";
// import oldUser from "../components/oldUser.vue";
import { getUserInfo, loginOut, userModif } from "../../api/test";
export default {
  components: {
    BottomList,
    Navtop,
    // oldUser
  },
  props: {},
  data() {
    return {
      nowtime: "",
      day: "",
      week: "",
      year: "",
      modf_name: "",
      modf_phone: "",
      modf_password: "",
      loading4: true,
      userInfo: {},
      navTitle: "个人信息",
      pageInfo: [
        { Tname: "个人信息", path: "/personal/info" },
        { Tname: "我的购物车", path: "/personal/shopCar" },
        { Tname: "我的订单", path: "/personal/realOrder" },
        { Tname: "我的地址管理", path: "/personal/shoppingAddress" },
        { Tname: "我的足迹", path: "/personal/bhistory" },
      ],
      test: false,
    };
  },
  watch: {},
  computed: {},
  async created() {
    console.log(this.test);
  },
  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter", to, from);

    // console.log(this);
    sessionStorage.setItem("toPage", to.fullPath);
    next((vm) => {
      vm.test = to.fullPath;
      vm.testFn();
    });
  },
  beforeRouteUpdate(to, from, next) {
    console.log(123);
    // console.log(this);
    let gopage = "";

    // let frompage = false3 ;
    console.log(1, to, 2, from);

    gopage = this.pageInfo.findIndex((item) => {
      return item.path == to.fullPath;
    });
    console.log(to.fullPath);
    for (let i = 1; i < this.$refs.active.children.length; i++) {
      this.$refs.active.children[i].children[0].setAttribute(
        "style",
        " color:#000"
      );
    }

    this.$refs.active.children[gopage + 1].children[0].setAttribute(
      "style",
      " color:skyblue"
    );
    // console.log(2234);
    this.navTitle = this.pageInfo[gopage].Tname;
    // if()
    // console.log(to, from);
    next();
  },
  methods: {
    // 进入页面修个侧边栏
    testFn() {
      console.log(this.test);
      let gopage = this.pageInfo.findIndex((item) => {
        return item.path == this.test;
      });
      console.log(gopage);
      this.$refs.active.children[gopage + 1].children[0].setAttribute(
        "style",
        " color:skyblue"
      );
      this.navTitle = this.pageInfo[gopage].Tname;
    },
    offFn() {
      this.mask_layer = false;
    },
    async TheUserFn(id) {
      if (this.modf_name && this.modf_phone && this.modf_password) {
        await userModif(id, {
          name: this.modf_name,
          phone: this.modf_phone,
          password: this.modf_password,
        })
          .then((res) => {
            // console.log(res);
            this.$message({
              message: "修改成功",
              type: "success",
            });
            setTimeout(() => {
              location.reload();
            }, 1000);
          })
          .catch(() => {
            this.$message.error("昵称重复，请修改其他昵称");
          });
      } else {
        this.$message.error("修改失败，信息不能为空");
      }
    },

    ttt(item) {
      this.$router.push({ path: `/particulars/${item}` });
    },
    getNowDate() {
      let date = new Date();
      var year = new Date().getFullYear();
      var month = new Date().getMonth() + 1;
      this.day = new Date().getDate();
      this.year = year + "." + month;
      this.week = "星期" + "日一二三四五六".charAt(date.getDay());
      // console.log(this.nowtime)
    },
  },

  mounted() {
    this.getNowDate();
    let gopage = sessionStorage.getItem("toPage");
    // let goRes = this.pageInfo.findIndex((item) => {
    //   return item.path == gopage;
    // });

    // console.log(this.$refs.active.children[1]);
    // this.$refs.active.children[goRes+1].children[0].setAttribute(
    //   "style",
    //   " color:skyblue"
    // );
    console.log(2);
  },
};
</script>
<style lang="scss" scoped>
.userMain {
  .main {
    width: 100%;
    // background-color: skyblue;
    nav {
      width: 100%;
      height: 100px;
      position: relative;
      background-color: #f7f7f7;
      .nav_logo {
        position: absolute;
        top: 25%;
        left: 5%;
        p {
          a {
            font-size: 40px;
            text-decoration: none;
            color: #000;
            font-weight: 700;
          }
        }
        p:hover {
          a {
            color: #415fff;
            transition: all 0.5s;
          }
        }
      }
      .title {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }
    .body {
      width: 100%;
      padding: 0px 5%;
      margin-top: 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;

      .sidebar {
        width: 15%;
        height: 300px;
        padding: 10px 2px;
        ul {
          width: 100%;
          height: 100%;
          padding: 10px 0px;
          box-sizing: border-box;
          h2 {
            color: skyblue;
            font-weight: 500;
          }
          li {
            margin: 10px 0px;
            cursor: pointer;

            a {
              color: #000;
              &:hover {
                color: skyblue;
              }
            }
            .Aactive {
              color: skyblue;
            }
          }
        }
      }
      .center {
        width: 63%;
        // height: 1000px;
        margin-bottom: 20px;
      }
      .date {
        width: 17%;
        height: 380px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .calendar {
          width: 100%;
          height: 200px;
          border: 1px solid #d3e4d5;
          .nav {
            width: 100%;
            height: 25%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            background-color: #84c58a;
          }
          .mian {
            width: 100%;
            height: 75%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            background-color: #f9fffa;
            .day {
              width: 100%;
              height: 50%;
              margin-top: 5px;
              color: #84c58a;
              font-size: 50px;
              font-weight: 500;
              display: flex;
              justify-content: center;
              align-items: center;
            }
            .week {
              width: 100%;
              height: 15%;
              color: #84c58a;
              display: flex;
              font-size: 15px;
              font-weight: 300;
              justify-content: center;
              align-items: center;
            }
            .year {
              width: 100%;
              height: 15%;
              color: #84c58a;
              font-size: 15px;
              font-weight: 300;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-bottom: 10px;
            }
          }
        }
        img {
          width: 100%;
          height: 40%;
          border: 1px solid #d3e4d5;
        }
      }
    }
  }
  // 遮罩层
  .pop_up {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(130, 127, 127, 0.4);

    .modif_box {
      position: relative;
      margin: 0 auto;
      width: 490px;
      height: 540px;
      background-color: #fff;
      transform: translateY(25%);

      .title {
        padding-top: 40px;
        p {
          font-size: 20px;
        }
        span {
          font-size: 12px;
          color: #999;
        }
      }

      .box {
        display: flex;
        flex-direction: column;
        padding: 0 15%;
        margin-top: 30px;
        span {
          font-size: 16px;
          text-align: left;
        }

        .input_box {
          margin-top: 10px;
          width: 100%;
          input {
            width: 100%;
            height: 40px;
            //   border-color: #000;
            border: 1px solid #dcdfe6;
            padding: 0 15px;
            color: #606266;
            border-radius: 4px;
            box-sizing: border-box;
          }
        }
      }

      .button_box {
        padding: 0 15%;
        margin-top: 40px;
        button {
          background-color: #456fff;
          width: 100%;
          height: 40px;
          border: none;
          color: #fff;
        }
      }

      .x {
        position: absolute;
        top: 10px;
        right: 25px;
        cursor: pointer;
        p {
          font-size: 30px;
          color: #dcdfe6;
        }
      }
    }
  }
}
</style>


